<template>
  <view class="video-footer">
    <view
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(#d86a6d, #fff);
        width: 100%;
        height: 120rpx;
      "
    >
      <text style="color: crimson; margin-bottom: 0rpx; font-size: medium"
        >支持我们,解锁后继续观看</text
      >
    </view>
    <view style="padding: 30rpx">
      <view
        style="
          margin-top: 5rpx;
          display: flex;
          justify-content: space-between;
          width: 100%;
        "
      >
        <text style="font-size: medium">解锁本集：200看点</text>
        <text style="font-size: medium; margin-right: 0"
          >账户余额：20000看点</text
        >
      </view>

      <view
        style="
          margin-top: 25rpx;
          display: flex;
          justify-content: space-between;
          width: 100%;
        "
      >
        <view
          style="
            border-style: solid;
            border-radius: 15rpx;
            border-color: rgb(135, 140, 135);
            border-width: 1rpx;
            width: 48%;
            height: 240rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          "
          @click="payThis"
        >
          <text>支付解锁当前集</text>
        </view>
        <view
          style="
            border-style: solid;
            border-radius: 15rpx;
            border-color: rgb(135, 140, 135);
            border-width: 1rpx;
            width: 48%;
            height: 240rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          "
          @click="payAll"
        >
          <text>支付解锁全部剧集</text>
        </view>
      </view>

      <view
        style="
          margin-top: 25rpx;
          display: flex;
          justify-content: space-between;
          width: 100%;
        "
      >
        <view
          style="
            border-style: solid;
            border-radius: 15rpx;
            border-color: rgb(135, 140, 135);
            border-width: 1rpx;
            width: 48%;
            height: 240rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          "
          @click="adThis"
        >
          <text>广告解锁当前集</text>
        </view>
        <view
          style="
            border-style: solid;
            border-radius: 15rpx;
            border-color: rgb(135, 140, 135);
            border-width: 1rpx;
            width: 48%;
            height: 240rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          "
          @click="adAll"
        >
          <text>广告解锁全部剧集</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const { getPlayletManager } = tt;
export default {
  data() {
    return {
      pm: null,
      title: "Hello Charge",
    };
  },
  async beforeCreate() {
    const pm = await getPlayletManager({
       is:'charge' // 和插槽同名
    });
    this.pm = pm;
    console.error(pm, this, "charge_pm_this_beforeCreate");
  },
  created() {
    console.log("chargeCreated");
  },
  beforeMount() {
    console.log("chargeBeforeMount");
  },
  mounted() {
    console.log("chargeMounted");
  },
  beforeUpdate() {
    console.log("chargeBeforeUpdate");
  },
  updated() {
    console.log("chargeUpdated");
  },
  beforeDestroy() {
    console.log("chargeBeforeDestroy");
  },
  destroyed() {
    console.log("chargeDestroyed");
  },
  methods: {
    payThis: function (e) {
      console.log("支付解锁当前集", e);
      this.pm.toggleCustomDialog();
      this.pm.setCurrentUnlock();
    },
    payAll: function (e) {
      console.log("支付解锁全集", e);
      this.pm.toggleCustomDialog();
      // this.pm.setCatalog();
    },
    adThis: function (e) {
      console.log("广告解锁当前集", e);
      // 监听视频播放完成
    },
    adAll: function (e) {
      console.log("广告解锁全集", e);
    },
  },
};
</script>

<style>
.video-footer {
  background-color: rgb(255, 255, 255);
  height: 1000rpx;
  width: 100%;
}
</style>
